<template>
  <div class="annotation">
    <div class="left">
      <div ref="box" class="box">
        <h1>内容区</h1>
        <div>1234</div>
        <p>12213fdsafaf12213fdsafafdsaf131212333412213fdsafafdsaf131212333412213fdsafafdsaf1312123334dsaf1312123334</p>
        <p>12213fdsafaf12213fdsafafdsaf131212333412213fdsafafdsaf131212333412213fdsafafdsaf1312123334dsaf1312123334</p>
        <p>12213fdsafaf12213fdsafafdsaf131212333412213fdsafafdsaf131212333412213fdsafafdsaf1312123334dsaf1312123334</p>
        <p>12213fdsafaf12213fdsafafdsaf131212333412213fdsafafdsaf131212333412213fdsafafdsaf1312123334dsaf1312123334</p>
        <p>12213fdsafaf12213fdsafafdsaf131212333412213fdsafafdsaf131212333412213fdsafafdsaf1312123334dsaf1312123334</p>
        <p>12213fdsafaf12213fdsafafdsaf131212333412213fdsafafdsaf131212333412213fdsafafdsaf1312123334dsaf1312123334</p>
        <p>12213fdsafaf12213fdsafafdsaf131212333412213fdsafafdsaf131212333412213fdsafafdsaf1312123334dsaf1312123334</p>
        <p>12213fdsafaf12213fdsafafdsaf131212333412213fdsafafdsaf131212333412213fdsafafdsaf1312123334dsaf1312123334</p>
        <p>12213fdsafaf12213fdsafafdsaf131212333412213fdsafafdsaf131212333412213fdsafafdsaf1312123334dsaf1312123334</p>
        <p>12213fdsafaf12213fdsafafdsaf131212333412213fdsafafdsaf131212333412213fdsafafdsaf1312123334dsaf1312123334</p>
        <p>12213fdsafaf12213fdsafafdsaf131212333412213fdsafafdsaf131212333412213fdsafafdsaf1312123334dsaf1312123334</p>
      </div>

      <div class="btn">
        <button @click="create">创建批注</button>
        <button @click="save">保存批注</button>
        <button @click="cancel">取消批注</button>
      </div>
    </div>

    <div class="right">
      <h5>截图的图片</h5>
      <div class="content">
        <div v-for="(v, i) in list" :key="i" class="item" @click="view(v)">
          <img :src="v.originBase64" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Annotation, html2canvas } from './index'

export default {
  data() {
    return {
      ann: null,
      list: [],
      shadowDom: null
    }
  },
  computed: {
    el() {
      return this.$refs.box
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    async create(annotations = [], readonly = false) {
      const box = this.el
      this.ann = await new Annotation(box, {
        annotations: annotations,
        toolConfigs: {
          hideSaveGroup: true,
          hideHistoryGroup: false, // 为false 批注可以删除
          showTools: !readonly
        },
        async setBgImg() {
          const canvas = await html2canvas(box, {
            backgroundColor: '#fff',
            useCORS: true,
            allowTaint: true,
            width: box.offsetWidth,
            height: box.offsetHeight,
            scale: 1, // 解决mac分辨率高导致截图和批注不对齐的问题
            dpi: window.devicePixelRatio * 300
            // ignoreElements: e => {
            //   // 性能优化，只加载相关节点
            //   const bol =
            //     (e?.contains(shadowDom) || box.parentNode?.contains(e)) &&
            //     !['link', 'script', 'noscript', 'meta', 'head', 'iframe', 'svg', 'symbol', 'path'].includes(
            //       e.tagName?.toLocaleLowerCase() || e.localName?.toLocaleLowerCase() || ''
            //     )
            //
            //   if (box.parentNode?.contains(e) && e.className?.includes('wrapper')) {
            //     return true
            //   }
            //   return !bol
            // }
          })
          return canvas.toDataURL('image/png')
        }
      })
      readonly ? this.ann._restore(annotations) : this.ann.start()
    },

    async save() {
      const annotate = await this.ann.getSaveData({
        boundaryWidth: this.el.offsetWidth,
        boundaryHeight: this.el.offsetHeight
      })
      this.list.push(annotate)
      this.cancel()
    },

    cancel() {
      if (this.ann?.annotationHelp?.editor) {
        this.ann.destroy() // 销毁标注
        this.ann = null
      }
    },

    view(item) {
      this.cancel()
      this.create(item.xdata.annotations, true) // 如果是修改就传false
    }
  }
}
</script>

<style lang="less" scoped>
.annotation {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  .left {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .box {
      position: relative;
      border: 1px solid red;
      width: 80%;
      height: 500px;
      margin: 0 auto;
      text-align: center;
      overflow: auto;
    }
    .btn {
      margin-top: 20px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      column-gap: 16px;
    }
  }
  .right {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .content {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: flex-start;
    }
  }
}
</style>
